<template>
  <div class="wik-status-list">
    <div class="wik-status-list-item-wrap" v-for="item in list" :key="item.id" @click="changeHandler(item.id)">
      <div class="wik-status-list-item" :class="item.className">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
type List = {
  id: string;
  name: string;
  color?: string;
  className: string;
};

const props = defineProps({
  list: {
    type: Array<List>,
    default: () => []
  },
  handleDateChange: {
    type: Function,
    default: () => {}
  }
});
const id = defineModel("id", {
  type: String,
  default: ""
});
const emits = defineEmits(["close"]);
const changeHandler = (val: any) => {
  id.value = val;
  props.handleDateChange(val);
  emits("close");
};
</script>
<style lang="scss" scoped>
.wik-status-list {
  // min-width: 114px;
  width: 100%;
  background: #fff;
  background: #ffffff;
  border-radius: 0.25rem;
  box-shadow: 0 0 16px #00000014;
  padding: 8px 0;
  .wik-status-list-item-wrap {
    padding: 8px 0;
    cursor: pointer;
    &:hover {
      background: #f5f5f5;
    }
  }
  &-item {
    height: 22px;
    border-radius: 14px;
    border: 1px solid transparent;

    margin: 0 20px;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
  }
}
</style>
